import React,{Component} from "react";
import style from "./index.module.scss";
import {bookInfo} from "../../common/data/_dataStructure";

import {antFilltag_icon,location_icon} from "../../common/icon/svg";
import {getSeller,getSeller2} from "../../serverAPI/index";


class BookShotInfo extends Component {
    constructor(props){
        super(props);
        this.state={
            userInfo:{},
            seller:{},
            bookInfo:{},
        }
    }

    static defaultProps = {
        bookInfo,
        ops:[{
            title:"下架",
            icon:"",
            action:null
        },{
            title:"编辑",
            icon:"",
            action:null
        },{
            title:"改价",
            icon:"",
            action:null
        }]
    }

    componentDidMount(){
       let temp = localStorage.getItem("loginUserInfo");
       if(temp){
            this.setState({userInfo:JSON.parse(temp)});
       }
       else location.href="/login";

       let bookInfo;
       let orderInfo = this.props.orderInfo;
       if(orderInfo){
           bookInfo = orderInfo;
       }else{
           bookInfo = this.props.bookInfo;
       }

       let sellerVer = this.props.bookInfo.userID;
       if(sellerVer){
            getSeller(sellerVer,res=>{
                let {code,msg,data} = res;
                if(code === "01"){
                    this.setState({seller:data});
                }
                else alert(msg);
            })
       }else{
            getSeller2(bookInfo.seller,res=>{
                let {code,msg,data} = res;
                if(code === "01"){
                    this.setState({seller:data});
                }
                else alert(msg);
            })
       }
    }

    render(){
        let bookInfo;
        let orderInfo = bookInfo = this.props.orderInfo;
        if(orderInfo){
            bookInfo = this.props.orderInfo.bookInfo
        }else{
            bookInfo = this.props.bookInfo;
        }

        let opItems = this.props.ops.map((it,i)=>{
            return (it.title === "order"
                ? (
                    <p className={style["order-status-box"]} key={i}>
                        <span>状态：{orderInfo.status}</span>
                        <span>{orderInfo.getType==="邮寄"?("邮费："+bookInfo.freight):"自提免邮费"}</span>
                        <span>付款：￥{orderInfo.pay}</span>
                    </p>
                )
                :(
                    <button key={i}
                        onClick={()=>{if(it.action) it.action()}}
                    >{it.title}</button>
                )
            )
        });
        return (
            <div className={style["bookshort-root"] + " " + style["loadLeft"]}>
                
                <div className={style["seller-info"]}>
                    <img src = {"/apis" + this.state.seller.userHeadUrl} />
                    <span>{this.state.seller.phonenum}</span>
                </div>

                <div className={style["book-info"]}>
                    <div>
                        <div className={style["cover-box"]}>
                            <img src={bookInfo.coverSrc
                                ? bookInfo.coverSrc
                                : require("../../common/image/book-cover-default.png").default
                            }></img>
                        </div>

                        <div className={style["info-details"]}>
                            <p>{bookInfo.name}</p>
                            <p>{bookInfo.describe}</p>
                            <p><span>{antFilltag_icon} {bookInfo.grade}成新</span><span>{location_icon} {bookInfo.location}</span></p>
                            <p>
                                <span>
                                    <span>￥{bookInfo.currPrice}</span>
                                    <span>￥{bookInfo.originPrice}</span>
                                </span>
                                <span>{bookInfo.indate}</span>
                            </p>
                        </div>
                    </div>

                    <div className={style["op-box"]}>
                        {opItems}
                    </div>
                </div>

            </div>
        )
    }
}

export default BookShotInfo;